<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>

<div class="app-page">
    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-body">
                <div class="select-city">
                    <div class="select-city-head">
                        <div class="select-city-title">请选择省份</div>
                        <div class="select-city-back" style="display: none;">x</div>
                    </div>
                    <div class="select-city-list"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';
    // 选择状态 0、省份 1、城市
    var selectType = 0;

    // 当前选择的
    var currentCity = {};

    // 禁用的城市
    var disableCity = {};

    // 初始化
    ~ function init() {
        if (App.query.city) {
            var citys = JSON.parse(decodeURIComponent(App.query.city));
            for (const key in citys) {
                var city = citys[key];
                currentCity[city.name] = city;
            }
        }

        if (App.query.disabled) {
            var citys = JSON.parse(decodeURIComponent(App.query.disabled));
            for (const key in citys) {
                var city = citys[key];
                disableCity[city.name] = city;
            }
        }

        getAddress();
    }();


    // 选择省份或城市
    $(document).on('click', '.select-city-item', function() {

        if($(this).hasClass('disabled')){
            return;
        }

        var name = $(this).data('name');
        var code = $(this).data('code');

        // 加载城市
        if (selectType == 0) {
            selectType = 1;

            getAddress(code);

            $('.select-city-back').show();
        }
        // 加载省份
        else {
            if ($(this).hasClass('active')) {
                delete currentCity[name];
            } else {
                currentCity[name] = {
                    name: name,
                    code: code,
                };
            }

            $(this).toggleClass('active');
        }
    })

    $(document).on('click', '.select-city-back', function() {
        selectType = 0;
        $('.select-city-back').hide();
        getAddress();
    })

    // 获取省份/城市数据
    function getAddress(provinceCode) {
        var url = '/area/listAllProvince';
        if (context) {
            url = context + url;
        }

        if (provinceCode) {
            url = '/area/listCity?provinceCode=' + provinceCode;
            if (context) {
                url = context + '/area/listCity?provinceCode=' + provinceCode;
            }
        }

        App.ajax({
            type: "GET",
            url: url,
            success: function(result) {
                var html = [];
                for (let i = 0; i < result.data.length; i++) {
                    var item = result.data[i];
                    var classHtml = '';

                    if (disableCity[item.name]) {
                        classHtml = 'disabled'
                    } else if (currentCity[item.name]) {
                        classHtml = 'active'
                    }

                    html.push('<div class="select-city-item ' + classHtml + '" data-name="' + item.name + '"  data-code="' + item.code + '">' + item.name + '</div>')
                }

                $('.select-city-list').html(html.join(''))
            }
        });
    }

    // 获取选择的城市
    function getSelectCity() {
        var city = [];

        for (var key in currentCity) {
            city.push(currentCity[key])
        }

        return city;
    }


</script>
</body>

</html>